import { FC } from "react"
import style from './index.module.scss'
import classnames from 'classnames/bind'
import { Button, Space, Tooltip } from "antd"
import { DeleteOutlined, EyeInvisibleOutlined, LockOutlined, UnlockOutlined,CopyOutlined, BlockOutlined,ArrowUpOutlined,ArrowDownOutlined,UndoOutlined,RedoOutlined} from '@ant-design/icons'
import { useDispatch, useSelector } from "react-redux"
import { deleteComponent, toggleHideComponent, toggleLockComponent,copyOneComponent,pasteComponent,upComponent,downComponent } from "../../store/ComponentReducer"
import { StateType } from "../../store"
import useGetQuestion from "../../hooks/useGetQuestion"
import { ActionCreators } from "redux-undo";
const CBN = classnames.bind(style)

const QuickButtons: FC = () => {
    const dispatch = useDispatch()
    const { selectedId } = useSelector((state: StateType) => {
        return state.Component_Reducer.present
    })
    const { selectedComponent,copyComponent } = useGetQuestion()
    const { lock } = selectedComponent || {}
    const deleteCom = () => {
        dispatch(deleteComponent())
    }

    const togglehideCom = () => {
        dispatch(toggleHideComponent({ fe_id: selectedId, ishide: true }))
    }

    const lockCom = () => {
        dispatch(toggleLockComponent({ fe_id: selectedId, islock: true }))
    }
    const unlockCom = () => {
        dispatch(toggleLockComponent({ fe_id: selectedId, islock: false }))
    }
    const copyCom = () =>{
        dispatch(copyOneComponent())
    }
    const pasteCom = ()=>{
        dispatch(pasteComponent())
    }

    const upCom = ()=>{
        dispatch(upComponent())
    }

    const downCom = ()=>{
        dispatch(downComponent())
    }

    const undo = ()=>{
        console.log('undo')
       dispatch(ActionCreators.undo())
    }

    const redo = ()=>{
        dispatch(ActionCreators.redo())
    }
    return <div className={CBN('quickContainer')}>
        <Space size={'small'}>
            <Tooltip placement="bottom" title='删除' >
                <Button shape="circle" onClick={deleteCom} disabled={selectedId === '' ? true : false} type='default' icon={<DeleteOutlined />}></Button>
            </Tooltip>
            <Tooltip placement="bottom" title='隐藏' >
                <Button shape="circle" onClick={togglehideCom} disabled={selectedId === '' ? true : false} type='default' icon={<EyeInvisibleOutlined />}></Button>
            </Tooltip>
            <Tooltip placement="bottom" title='锁定' >
                <Button shape="circle" onClick={lockCom} disabled={selectedId === '' ? true : false} type={lock ? 'primary' : 'default'} icon={<LockOutlined />}></Button>
            </Tooltip>
            <Tooltip placement="bottom" title='解锁' >
                <Button shape="circle" onClick={unlockCom} disabled={selectedId === '' ? true : false} type={!lock ? 'primary' : 'default'} icon={<UnlockOutlined />}></Button>
            </Tooltip>
            <Tooltip placement="bottom" title='复制' >
                <Button shape="circle" onClick={copyCom} disabled={selectedId === '' ? true : false} type='default' icon={<CopyOutlined />}></Button>
            </Tooltip>
            <Tooltip placement="bottom" title='粘贴' >
                <Button shape="circle" onClick={pasteCom} disabled={copyComponent === null ? true : false} type='default' icon={<BlockOutlined />}></Button>
            </Tooltip>

            <Tooltip placement="bottom" title='上移' >
                <Button shape="circle" onClick={upCom} disabled={selectedId === '' ? true : false} type='default' icon={<ArrowUpOutlined />}></Button>
            </Tooltip>
            <Tooltip placement="bottom" title='下移' >
                <Button shape="circle" onClick={downCom} disabled={selectedId === '' ? true : false} type='default' icon={<ArrowDownOutlined />}></Button>
            </Tooltip>

            <Tooltip placement="bottom" title='撤销' >
                <Button shape="circle" onClick={undo}  type='default' icon={<UndoOutlined />}></Button>
            </Tooltip>
            <Tooltip placement="bottom" title='重做' >
                <Button shape="circle" onClick={redo}  type='default' icon={<RedoOutlined />}></Button>
            </Tooltip>

        </Space>
    </div>
}

export default QuickButtons